<template>
	<view>
		<form>
			<view class="cu-form-group margin-top">
				<view class="title">农场名称</view>
				<picker @change="PickerChange1" range-key="nc_mc" :value="sel1"  :range="ncpicker">
					<view class="picker">
						{{sel1>-1?ncpicker[sel1].nc_mc:'请选择'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">管理区名称</view>
				<picker @change="PickerChange2" range-key="glq_mc" :value="sel2"  :range="glqpicker">
					<view class="picker" v-if="glqpicker.length>0">
						{{sel2>-1&&glqpicker[sel2].glq_mc?glqpicker[sel2].glq_mc:'请先选择农场名称'}}
					</view>
				</picker>
				<view v-if='glqpicker.length==0' class="deftxt">请先选择农场名称</view>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">地块名称</view>
				<picker @change="PickerChange3" range-key="dk_mc" :value="sel3" :range="dkpicker">
					<view class="picker" v-if="dkpicker.length>0">
						{{sel3>-1&&dkpicker[sel3].dk_mc?dkpicker[sel3].dk_mc:'请先选择管理区名称'}}
					</view>
				</picker>
				<view v-if='dkpicker.length==0' class="deftxt">请先选择管理区名称</view>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">年份</view>
				<picker  mode="date" :start="startDate" :end="endDate" :value="rqpicker" fields='year' @change="PickerChange4">
					<view class="picker">
						{{rqpicker}}
					</view>
				</picker>
			</view>
			<view class="padding flex">
				<button class="flex-sub cu-btn block bg-blue margin-sm lg" @tap="jwcx">查询</button>
				<button class="flex-sub cu-btn block bg-blue margin-sm lg" @tap="clearsle()">重置</button>
			</view>
		</form>
		<view class="table">
			 <view class="tr bg-w">
				 <view class="th">年份</view>
				 <view class="th">积温</view>
			 </view>
			 <scroll-view scroll-y class="scroll-view-item_H">
				 <view v-for="(item,index) in listData" :key="index" class="tr" :class='index % 2 == 0? "bg-g":""'>
					  <view class="td">{{item.nd}}</view>
					  <view class="td">{{item.jw}}</view>
				 </view>
			 </scroll-view>
		</view>
	</view>
</template>

<script>
	import {getncxxlist,getglqxxlist,getdkxxlist,getjwcx} from '../api/api.js'
	export default {
		data() {
			const currentDate = this.getDate({
			            format: true
			        })
			return {
				sel1: -1,
				sel2: -1,
				sel3: -1,
				sel4: -1,
				ncpicker:[],
				glqpicker:[],
				dkpicker:[],
				rqpicker:currentDate,
				listData:[
				
				 ]
				};
			},
			onShow(){
				let _this=this;
				getncxxlist(      //农场数据
					function(res){
						_this.ncpicker=res.data.returnData.ncxxlb;
					}
				)
			},
			computed: {
					startDate() {
						return this.getDate('start');
					},
					endDate() {
						return this.getDate('end');
					}
		    },
			methods: {
				jwcx(){
					if(this.dkpicker[this.sel3]&&this.dkpicker[this.sel3].dk_bh){
						let parm={dk_bh:this.dkpicker[this.sel3].dk_bh,nd:this.rqpicker};
						getjwcx(parm ,res=>{

							this.listData=res.data.returnData.jwxxlb
						})
					}else{
						uni.showModal({
						    title: '提示',
						    content: '请选择地块名称',
							showCancel:false
						});
					}
					
				},
				getDate(type) {
							const date = new Date();
							let year = date.getFullYear();
							let month = date.getMonth() + 1;
							let day = date.getDate();
				
							if (type === 'start') {
								year = year - 1;
							} else if (type === 'end') {
								year = year ;
							}
							month = month > 9 ? month : '0' + month;;
							day = day > 9 ? day : '0' + day;
							return `${year}`;
					},
					PickerChange1(e) {
						let _this=this
						if(e.detail.value==-1 ) e.detail.value=0
						this.sel1 = e.detail.value;
						this.setselback()
					    let parm ={
							cx_ssnc:this.ncpicker[this.sel1]?this.ncpicker[this.sel1].nc_bh:''
						} 
						getglqxxlist(      //管理区数据
							parm,
							function(res){
								_this.glqpicker=res.data.returnData.glqxxlb||[];	
								
							}
						)
					},
					setselback(){
					
						this.sel2= -1;
						this.sel3= -1;
						this.sel4= -1;
						this.glqpicker=[];
						this.dkpicker=[];
					},
					PickerChange2(e) {
						let _this=this
						if(e.detail.value==-1 ) e.detail.value=0
						this.sel2 = e.detail.value;
						
						let parm={cx_ssjd:this.glqpicker[this.sel2].glq_bh}
						getdkxxlist(parm,
						function (res) {
							_this.dkpicker=res.data.returnData.dkxxlb||[]
						}
                        )						
					},
					PickerChange3(e) {
						if(e.detail.value==-1 ) e.detail.value=0
						this.sel3 = e.detail.value
					},
					PickerChange4(e) {
						 this.rqpicker = e.detail.value
					},
					clearsle(){
						this.sel1= -1,
						this.sel2= -1,
						this.sel3= -1,
						this.sel4= -1
					}
					
					
			}
		}
</script>

<style>
	@import "../../colorui/main.css";
	@import "../../colorui/icon.css"; 
	.table {
	 border: 0px solid darkgray;
	 font-size: 26upx;
	}
	.tr {
	 display: flex;
	 width: 100%;
	 justify-content: center;
	 height: 3rem;
	 align-items: center;
	}
	.td {
	 width:50%;
	 justify-content: center;
	 text-align: center;
	}
	.bg-w{
	 background: snow;
	}
	.bg-g{
	 background: #E6F3F9;
	}
	.th {
	 width: 50%;
	 justify-content: center;
	 background: #0081ff;
	 color: #fff;
	 display: flex;
	 height: 3rem;
	 align-items: center;
	}
</style>
